import React from 'react'
import propTypes from 'prop-types';

/*
    校验props：
    文档地址： https://zh-hans.legacy.reactjs.org/docs/typechecking-with-proptypes.html

    propTypes：一定要小写开头，坑爹的玩意。。。淦
*/

function Child(props) {
    return (
        <div style={{ 'border': '1px solid pink' }}>
            子组件：人<br></br>
            姓名：{props.name}<br />
            年龄：{props.age}<br />
            性别：{props.sex}<br />
        </div>
    )
}

// 默认值
Child.defaultProps = {
    // 字段设置规则
    name: 'hh',
    age: 999,
    sex: '未知',
    children: {}
}

// 校验规则
Child.propTypes = {
    // 字段设置规则
    name: propTypes.string.isRequired,
    age: propTypes.number,
    sex: propTypes.string,
    children: propTypes.shape({
        name: propTypes.string,
        sex: propTypes.string,
        age: propTypes.number.isRequired
    })
}

export default function A3() {
    let obj = {
        // name: 'wmh',
        // age: 18,
        // sex: '男',
        children: {
            name: 'zo',
            sex: '女',
            age: 18  // 不传报错
        }
    }
    return (
        <div>
            <h2>A3.js 校验props</h2>
            父组件
            <Child {...obj} />
        </div>
    )
}
